<template>
  <div class="form" v-if="async">
    <el-form-item :label="`${title}用户类型`">
      <el-select v-if="type === 'orderUser'" v-model="viewModel.orderUserTypeId" @change="reqData(true)" filterable placeholder="请选择">
        <el-option v-for="item in widgetModel" :key="item.value" :label="item.value" :value="item.key">
        </el-option>
      </el-select>
      <el-select v-else v-model="viewModel.shareUserTypeId" @change="reqData(true)" filterable placeholder="请选择">
        <el-option v-for="item in widgetModel" :key="item.value" :label="item.value" :value="item.key">
        </el-option>
      </el-select>
      <div class="demo_intro">
        选择{{title}}的用户类型，比如选择股东，则该条分润规则只针对股东有效。用户类型管理
      </div>
    </el-form-item>
    <!--分割线-->
    <el-form-item :label="`是否限制${title}等级`">
      <el-switch v-if="type === 'orderUser'" v-model="viewModel.isLimitOrderUserGrade" @change="headleChange(viewModel.isLimitOrderUserGrade, 'orderUser')"></el-switch>
      <el-switch v-else v-model="viewModel.isLimitShareUserGrade" @change="headleChange(viewModel.isLimitShareUserGrade, 'shareUser')"></el-switch>
      <div class="demo_intro">选择{{title}}的用户类型等级。</div>
    </el-form-item>
    <el-form-item v-if="viewModel.isLimitOrderUserGrade || viewModel.isLimitShareUserGrade" :label="textIntro">
      <el-checkbox-group v-model="orderList" v-if="type === 'orderUser'">
        <el-checkbox v-for="city in selectData" :label="city.key" :key="city.key">{{city.name}}</el-checkbox>
      </el-checkbox-group>
      <el-checkbox-group v-model="shareList" v-else>
        <el-checkbox v-for="city in selectData" :label="city.key" :key="city.key">{{city.name}}</el-checkbox>
      </el-checkbox-group>
      <div class="demo_intro">开启等级以后只有相应的等级才能够产生分润。</div>
    </el-form-item>
  </div>
</template>

<script>
  import ala from 'ala'
  export default {
    props: {
      viewModel: {},
      type: {
        default: null
      },
      title: {}
    },
    data () {
      return {
        async: false,
        widgetModel: '',
        textIntro: '',
        selectData: '',
        orderList: [],
        shareList: []
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        if (this.type === 'orderUser') {
          if (this.viewModel.orderUserGradeIds !== undefined) {
            this.orderList = this.viewModel.orderUserGradeIds
          } else {
            this.orderList = []
          }
        } else {
          if (this.viewModel.shareUserGradeIds !== undefined) {
            this.shareList = this.viewModel.shareUserGradeIds
          } else {
            this.shareList = []
          }
        }
        this.isalt = this.type === 'orderUser'
        var response = await this.$ala.httpGet(
          'api/Type/GetKeyValue?Type=UserTypeConfig'
        )
        if (response) {
          this.widgetModel = response
          if (response && response.length > 0) {
            this.getRewardUrl(response, 'UserTypeConfig')
          }
        }
        this.reqRepone()
        this.decideType()
        this.async = true
      },
      headleChange (val, type) {
        if (!val) {
          if (this.type === 'orderUser') {
            this.orderList = []
          } else {
            this.shareList = []
          }
        }
      },
      async reqData () {
        if (this.type === 'orderUser') {
          this.orderList = []
        } else {
          this.shareList = []
        }
        this.reqRepone()
        if (this.selectData && this.selectData.length > 0) {
          this.getRewardUrl(this.selectData, 'userTypeId')
        }
      },
      async reqRepone () {
        var para = {
          userTypeId: this.viewModel.orderUserTypeId || this.viewModel.shareUserTypeId
        }
        var userVimodel = await this.$ala.httpGet('api/RewardRule/GetUserGradeListByUserTypeId', para)
        if (userVimodel) {
          this.selectData = userVimodel
        }
      },
      decideType () {
        if (this.type === 'orderUser') {
          this.textIntro = '获利用户等级'
        } else {
          this.textIntro = '触发用户等级'
        }
      },
      getRewardUrl (response, type) {
        if (type === 'UserTypeConfig') {
          if (this.type === 'orderUser') {
            this.viewModel.orderUserTypeId = response[0].key
          } else {
            this.viewModel.shareUserTypeId = response[0].key
          }
        } else {
          if (this.type === 'orderUser') {
            this.viewModel.orderUserGradeIds = response[0].key
          } else {
            this.viewModel.shareUserGradeIds = response[0].key
          }
        }
      }
    },
    watch: {
      orderList: {
        deep: true,
        handler (val) {
          this.viewModel.orderUserGradeIds = val
        }
      },
      shareList: {
        deep: true,
        handler (val) {
          this.viewModel.shareUserGradeIds = val
        }
      }
    }
  }
</script>
